<template>
	<div>
  
		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
			<el-menu-item index="1" @click="toRouter('/project')">我的项目</el-menu-item>
      <el-menu-item index="2" @click="toRouter('/submitBug')">提交bug</el-menu-item>
      <el-menu-item index="3" is-dot @click="toRouter('/bugs')">
        <el-badge :is-dot="hasNewBugs" class="item" >bug处理</el-badge>
      </el-menu-item>
			<el-menu-item index="4" @click="toRouter('/mission')">
		  	<el-badge :is-dot="hasNewMission" class="item" >任务中心</el-badge>
			</el-menu-item>
			<el-menu-item index="5" @click="toRouter('/personal')">个人中心</el-menu-item>
      <el-menu-item index="6" >
        <img class="avatar" :src="avatarPic" alt="我的头像" width="50" height="50">
      </el-menu-item>
			<el-menu-item index="7" @click="logoutHandle">注销</el-menu-item>
      <el-menu-item index="8" class="fr">
        <span>累计完成任务量:</span>
        <span class="colred">{{weight}}</span>
      </el-menu-item>
		</el-menu>
		<router-view/>
		
	</div>
</template>

<script>
import { mapGetters } from "vuex";
import axios from "axios";
const ERR_OK = 1
export default {
  data() {
    return {
      activeIndex: "1",
      id: 0,
      hasNewMission: false,
      hasNewBugs: false
    };
  },
  created() {
    let token = this.$cookie.get("token");
    let msg = JSON.parse(localStorage.getItem("loginMsg"));
    this.id = msg.huser_id;
    this.weight = msg.weight;
    if (!this.id || token === null) {
      this.$router.push("/login");
    }
    this._getTasksData()
    this._getDataList()
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    toRouter(router, index) {
      this.$router.push(router);
    },
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$cookie.delete("token");
          sessionStorage.removeItem("loginMsg");
          this.$router.options.isAddDynamicMenuRoutes = false;
          this.$router.push("/login");
        })
        .catch(() => { });
    },
    _getTasksData() {
      const url = "api/tasks/index.html";
      let tasks = {
        tasks_suid: 2,
        tasks_status: 1
      };
      axios
        .post(url, tasks)
        .then(res => {
          if (res.data.code === ERR_OK) {
            if (!res.data.data.length) {
              return false
            } else {
              this.hasNewMission = true
            }
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    _getDataList() {
      const url = "api/bugs/index.html";
      const params = {
        pageNumber: 1,
        pageSize: 10,
        searchText: "",
        bugs_suid: this.id,
        bugs_status: 1
      };
      axios.post(url, params).then(res => {
        if (!res.data.rows.length) {
          return false
        } else {
          this.hasNewBugs = true
        }
      });
    }
  },
  computed: {
    ...mapGetters(["person"]),
    avatarPic() {
      let msg = localStorage.getItem("loginMsg")
      let upLP = sessionStorage.getItem('avatar')
      if (!upLP) {
        console.log(`http://apitest.zhongxiangtianxia.cn/${JSON.parse(msg).huser_head}`)
        return `http://apitest.zhongxiangtianxia.cn/${JSON.parse(msg).huser_head}`
      } else {
        return `http://apitest.zhongxiangtianxia.cn/${upLP}`
      }
    }
  }
};
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}
.fr{
  float: right;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.colred{
  color: red;
}
.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.avatar {
  border-radius: 100%;
}
</style>